define(['jquery'],function($){
	Vue.directive('withClearBtn',{
		inserted: function(el,binding,vNode){
			var $el = $(el).css({
				'padding-right':'1.5em',
				'box-sizing':'border-box',
				'margin-right': '3px'
			});

			var pos = $el.position();
			var $btn = $('<img src="../static/images/clear.png">').css('width',20);

			$btn.css({
				position: 'absolute',
				left: pos.left + $el.width() + 5,
				top: pos.top + $el.height() / 2 - 10,
			}).hide().on('touchend',function(){
				setTimeout(function(){
					$btn.hide();
					$el.val('').focus();
					if( document.createEvent ) {
						var evObj = document.createEvent('HTMLEvents');
						evObj.initEvent( 'input', true, false );
						el.dispatchEvent(evObj);
					}else if( document.createEventObject ){
						el.fireEvent('input');
					}
				},0);
			}).insertAfter($el);

			$el.data('btn',$btn);
			if($el.val().length>0){
				$btn.show();
			}else{
				$btn.hide();
			}
		},
		update: function(el,binding,vNode){
			var $btn = $(el).data('btn');
			if(el.value.length>0){
				$btn.show();
			}else{
				$btn.hide();
			}
		}
	})
});